<template>
	<view>
		<view class="main">
			<view class="inputInfo">
				<image class="photo" src="../../static/user2/photo.png"></image>
				<input class="loginInput" type="number" placeholder="请输入手机号" v-model="userNamephone" />
			</view>
			<view class="inputInfo">
				<image class="password" src="../../static/user2/password.png"></image>
				<input class="loginInput" type="password" password="true" placeholder="请输入6-16位密码" v-model="userPwd" />
			</view>
			<text @click="goRetrieve" class="forgetPwd">忘记密码?</text>
			<text class="rememberPwd">记住密码</text>
			<view @click="gouser" class="login">登录</view>
			<text @click="goregeist" class="register">注册新用户</text>
		</view>
	</view>
</template>
<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return { 
				userNamephone: '',
				userPwd: '',
				rules: {
					userNamephone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					userPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						msg: "密码应该为6-16位"
					}
				}
			};
		},
		methods: {
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						icon: "none",
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},

			gouser() {
				if (!this.validate('userNamephone')) return;
				if (!this.validate("userPwd")) return;
				var self = this;
				Require.commonRequest({
					
					url: '/api/member/login',
					method:'POST',
					data: {
						mobile: self.userNamephone,
						password: self.userPwd
					},
					success: function(ret) {
						if (ret.data.code == 200) {
							self.token_get(ret.data.data.token)
							uni.setStorage({
								key: 'loginInfo',
								data: ret.data.data.token,
								success: function() {
								}
							});
							uni.showToast({
								title:'登录成功'
							})
							setTimeout(function(){
								uni.switchTab({
									url: '../user/user'
								})
							},1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: ret.data.msg,
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			token_get(token) {
				var self = this;
				Require.commonRequest({
					url: '/api/member/profile',
					data: {
						token:token
					},
					success: function(ret) {
						if (ret.data.code == 200) {
							console.log(ret.data.data)
							uni.setStorage({
								key: 'userinfo',
								data:ret.data.data,
								success: function() {
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: ret.data.msg,
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			
			
			
			
			
			
			
			
			goRetrieve() {
				uni.navigateTo({
					url: './retrievePwd'
				})
			},
			goregeist() {
				uni.navigateTo({
					url: './register'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		width: 750rpx;
		height: 900rpx;
		position: relative;
		top: 100rpx;
	}

	.inputInfo {
		width: 650rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 50rpx;
		top: 180rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.photo {
		width: 28rpx;
		height: 40rpx;
	}

	.loginInput {
		font-size: 28rpx;
		position: relative;
		left: 20rpx;
	}

	.password {
		width: 32rpx;
		height: 36rpx;
	}

	.forgetPwd {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		top: 440rpx;
		left: 50rpx;
	}

	.rememberPwd {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		top: 440rpx;
		right: 64rpx;
	}

	.login {
		width: 650rpx;
		height: 90rpx;
		background: rgba(115, 34, 216, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.3);
		border-radius: 20rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 575rpx;
		left: 50rpx;
	}

	.register {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		top: 695rpx;
		left: 315rpx;
	}
</style>
